<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="${pageContext.request.contextPath}/lib/static/login/images/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/lib/static/common/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/lib/static/common/js/jquery.form.js"></script>
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>角色管理</legend>
        </fieldset>
    </div>
    <hr class="layui-bg-red">
    <!--按钮及查询框组-->
    <div class="layui-row">
        <div class="layui-col-md-offset1">
            <form class="layui-form" method="post">
                <div class="layui-inline">
                    <input class="layui-input" id="criteria" autocomplete="off" placeholder="角色名">
                </div>
                <button class="layui-btn layuiadmin-btn-admin" lay-submit="" lay-filter="search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </form>
        </div>
    </div>
    <table class="layui-hide" id="roleTable" lay-filter="RoleMonitor">


    </table>
    <script type="text/html" id="RoleToolBar">
        <div class="layui-btn-container" id="Xinzeng">
            <button class="layui-btn layui-btn-sm" lay-event="delByIds">删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs " lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="accredit">授权</a>
        <%--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" lay-filter="del" >删除</a>--%>

    </script>
    <script>
        var baseUrl = '${pageContext.request.contextPath}/sys/role/';

        function sendAjaxPostReq($, param, tableRoleIns, method) {
            $.post(
                baseUrl + method,
                param,
                function (result) {
                    if (result.code == 0) {
                        layer.msg(result.msg, {icon: 1});
                        /*刷新表格数据*/
                        tableRoleIns.reload({
                            url: baseUrl + "get"
                        });
                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                },
                "json"
            );
        }
        function deleteRoleByIds($, ids, tableRoleIns,len) {
            layer.confirm("您选中了" + len + "条数据，确认删除？", function(index){
                sendAjaxPostReq($, {ids:ids}, tableRoleIns,"deleteByIds");
                layer.close(index);
            });
        }
        layui.use(['jquery','table', 'form'], function () {
            var table = layui.table;
            var form = layui.form;
            layer = layui.layer;
            var tableRoleIns = table.render({
                elem: '#roleTable'
                ,title: "角色数据"
                ,defaultToolbar:['filter']
                , toolbar: '#RoleToolBar'
                , url: baseUrl +'get'
                , request: {
                    pageName: 'pageNo' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,height: 'full-150'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增

                , cols: [[{type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', sort: true}
                    , {field: 'roleName', title: '<i class="layui-icon">&#xe612;</i> 角色名称'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , {field: 'roleDesc', title: '<i class="layui-icon">&#xe60b;</i> 角色描述'}
                    , {field: 'addUser', title: ' <i class="layui-icon">&#xe66f;</i> 添加人'}
                    , {field: 'addTime', title: ' <i class="layui-icon">&#xe60e;</i> 添加时间 ', sort: true,templet:'<div>{{layui.laytpl.toDateString(d.addTime)}}</div>'} //单元格内容水平居中
                    , {field: 'updateUser', title: '<i class="layui-icon">&#xe66f;</i> 修改人'} //单元格内容水平居中
                    , {field: 'updateTime', title: '<i class="layui-icon">&#xe60e;</i> 修改时间', sort: true,templet:'<div>{{layui.laytpl.toDateString(d.updateTime)}}</div>'}
                    , {fixed: 'right', title: '<i class="layui-icon">&#xe614;</i> 操作', toolbar: '#barDemo',align: 'center'}
                ]]
                , page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                    , groups: 5
                }
            });

            //时间戳处理
            layui.laytpl.toDateString=function(d,format){
                var date = new Date(d||new Date())
                    ,ymd=[
                    this.digit(date.getFullYear(),4)
                    ,this.digit(date.getMonth()+1)
                    ,this.digit(date.getDate())
                ]
                    ,hms=[
                    this.digit(date.getHours())
                    ,this.digit(date.getMinutes())
                    ,this.digit(date.getSeconds())
                ];
                format=format||'yyyy-MM-dd HH:mm:ss';
                return format.replace(/yyyy/g,ymd[0])
                    .replace(/MM/g,ymd[1])
                    .replace(/dd/g,ymd[2])
                    .replace(/HH/g,hms[0])
                    .replace(/mm/g,hms[1])
                    .replace(/ss/g,hms[2])
            };
            //数字前置补零
            layui.laytpl.digit = function(num,length,end){
                var str='';
                num = String(num);
                length=length ||2;
                for(var i=num.length;i<length;i++){
                    str +='0';
                }
                return num<Math.pow(10,length) ? str+(num|0):num;
            };
            //头工具栏事件
            table.on('toolbar(RoleMonitor)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'delByIds':
                        /*获得要删除的ids*/
                        var data = checkStatus.data;
                        var ids = [];
                        $.each( data, function (index, value) {
                            var id = value.id;
                            ids.push(id);
                        });
                        if(data.length==0){
                            layer.alert('请至少选择一条您要删除的数据', {
                                skin: 'layui-layer-molv'
                                , closeBtn: 0
                            });
                        }else{
                        deleteRoleByIds($,ids.toString(),tableRoleIns,data.length);
                        }
                        break;
                    case 'add':
                        layer.open({
                            content: [baseUrl + 'role_edit'],
                            type: 2,
                            title: '<h2>添加角色</h2>',
                            maxmin: true,
                            shadeClose: true,
                            offset: '150px',
                            area: ['800px', '520px'],
                            closeBtn: 2,
                            success: function (layero, index) {
                                layer.iframeAuto(index);
                            }
                        });
                        break;
                }

            });

            table.on('tool(RoleMonitor)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'del':
                        deleteRoleByIds($,data.id,tableRoleIns,1);
                        break;
                    case 'edit':
                        layer.open({
                            content: [baseUrl + 'role_update'],
                            type: 2,
                            title: '<h2>修改角色</h2>',
                            maxmin: true,
                            shadeClose: true,
                            offset: '150px',
                            area: ['800px', '520px'],
                            closeBtn: 2,
                            success: function (layero, index) {
                                var body = layer.getChildFrame('body', index);
                                body.find('#id').val(data.id);
                                body.find('#layui-roleName').val(data.roleName);
                                body.find('#layui-roleDesc').val(data.roleDesc);

                                if(data.grantEnable === "已授权"){
                                    body.find("input[name='grantEnable']").attr("checked","checked");
                                }
                                layer.iframeAuto(index);
                                return false;
                            }
                        });
                        break;
                    case 'accredit':
                        layer.open({
                            content: [baseUrl + 'role_accredit'],
                            type: 2,
                            title: '<h2>授权管理</h2>',
                            maxmin: true,
                            shadeClose: true,
                            offset: '80px',
                            area: ['800px', '620px'],
                            closeBtn: 2,
                            success: function (layero, index) {
                                var body = layer.getChildFrame('body', index);
                                body.find('#id').val(data.id);
                                return false;
                            }
                        });
                        break;
                }
            });
            /*查询功能*/
            form.on('submit(search)', function (data) {
                var criteria = $("#criteria").val();
                tableRoleIns.reload({
                    url: baseUrl + 'get'
                    ,method: "post"
                    , where: {
                        criteria: criteria
                    }
                });
                return false;
            });
        });

    </script>
</div>

</div>
</body>
</html>
